<template>
  <transition name="scale-fade">
    <div
      v-if="visible"
      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
    >
      <div class="bg-white rounded-lg p-6 w-80 shadow-lg">
        <p class="mb-6 text-center text-gray-800">{{ message }}</p>
        <div class="flex justify-center space-x-4">
          <button
            @click="$emit('cancel')"
            class="px-5 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition"
          >取消</button>
          <button
            @click="$emit('confirm')"
            class="px-5 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition"
          >确认</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script setup lang="ts">
defineProps<{ visible: boolean; message: string }>()
defineEmits<{ (e: 'confirm'): void; (e: 'cancel'): void }>()
</script>

<style scoped>
.scale-fade-enter-active, .scale-fade-leave-active {
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.scale-fade-enter-from {
  opacity: 0;
  transform: scale(0.95);
}
.scale-fade-enter-to {
  opacity: 1;
  transform: scale(1);
}
.scale-fade-leave-from {
  opacity: 1;
  transform: scale(1);
}
.scale-fade-leave-to {
  opacity: 0;
  transform: scale(0.95);
}
</style>
